<style scoped>

.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 150px;
    padding-bottom: 200px;
}
.wrapper > h1{
  text-align: center;
  vertical-align: middle;
  margin-bottom: 20px;
  color: #000;
}
.login {
    margin: 0 auto;
    padding: 200px auto;
    width: 200px;
    height: 100%;
}

</style>

<template>

<div class="wrapper">
<h1>
华能热力服务平台登录
</h1>
    <div class="login">
        <i-form ref="formInline" :model="formInline" :rules="ruleInline">
            <Form-item prop="user">
                <Input v-model="formInline.user" placeholder="请输入用户名"></Input>
            </Form-item>
            <Form-item prop="password">
                <Input v-model="formInline.password" type="password" placeholder="请输入密码"></Input>
            </Form-item>
            <Form-item prop="captcha">
                <Input v-model="formInline.captcha"  placeholder="请输入验证码"></Input>
            </Form-item>
            <div>
                <Form-item>
                    <Button type="info" disabled size="large">{{img}}</Button>
                    <Button type="text" @click="refreshYzm">换一张</Button>
               </Form-item>
            </div>
            
            
            <Form-item>
                <i-button type="success" @click.native="handleSubmit('formInline')" long>登录</i-button>
            </Form-item>
        </i-form>
    </div>
</div>

</template>

<script>
import axios from 'axios'
var _COUNT = 0;
export default {
    data() {
            return {
                formInline: {
                    user: '',
                    password: '',
                    captcha:'',
                },
                img: this.getImg(),
                ruleInline: {
                    user: [{
                        required: true,
                        message: '请填写用户名',
                        trigger: 'blur'
                    }],
                    password: [{
                        required: true,
                        message: '请填写密码',
                        trigger: 'blur'
                    }, {
                        type: 'string',
                        min: 6,
                        message: '密码长度不能小于6位',
                        trigger: 'blur'
                    }],
                    captcha: [{
                        required: true,
                        message: '请填写验证码',
                        trigger: 'blur'
                    }]
                }
            }
        },
        methods: {
            handleSubmit(name) {
                this.$Message.success('提交成功!');
                this.$router.push('/xwzx');  
            },
            handleReset(val) {
                console.log(val)
            },
            //验证码刷新
            refreshYzm(){
                this.img = this.getImg();
            },
            getImg(){
                var chars = ['0','1','2','3','4','5','6','7','8','9'];
                var res = '';
                for(var i = 0; i < 4 ; i ++) {
                    var id = Math.ceil(Math.random()*9);
                    res += chars[id];
                }
                return res;
            }
        }
    }

</script>
<style>
    .ivu-form-item {
        margin-bottom: 18px;
    }
</style>